<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>快速登录</title>
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
        body {
            background: #fff !important;
        }

        .code {
            position: absolute;
            right: 5px;
            top: 20px;
            text-align: right;
            color: #EA5717;
            font-size: 14px;
            width: 80px;
        }

        .codeactive {
            color: #EA5717;
        }

        .left_list {
            display: inline-block;
            position: relative;
        }

        .downward {
            width: 10px;
            height: 8px;
        }

        input {
            font-size: 14px;
        }

        .shurukuang{
          position: absolute;
          left:67px;
        }
        .codeactive{
          color: #EA5717;
        }
        .xuexue{
          padding-top: 10px;
        }
        .back1{
          display: inline-block;
          margin-left: 15px;
          margin-top: 35px;
          width: 30px;
      }
        }
        .back2{
          width: 10px;
          margin-left: 15px;
        }
    </style>
</head>

<body>
    <div id="vm" v-cloak>

        <div class="big-box">
          <div class="back1" onclick="closeWin1()">
            <img src="../../image/back.png"  alt="" class="back2" style="width: 12px;"/>
          </div>
            <div class="xuexue">
                <img src="../../image/login/xuexue.png" class="xue">
            </div>
            <div class="boxo">
                <div class="first">
                    <div class="oneo" @click="Openpasswordlogin()">密码登录</div>
                    <div class="repid">快速登录</div>
                </div>
                <div class="box">
                    <div class="telephone">
                        <span class="left_list">
                    <span onclick="Openphone()">+{{guojianumber}}</span><img src="../../image/login/downward.png" class="downward" />
                        </span>
                        <input type="text" class="shurukuang" placeholder="请输入手机号" v-model="mobile" @focus="jiaodian()" @blur="shijiaodian()" v-on:input="mobileinput">
                        <img src="../../image/login/delete.png" class="delete" v-if="isshowdelete" @click="qingchu()">
                    </div>
                    <div class="telephone">
                        <span class="left_list">验证码</span>
                        <input type="text" class="shurukuang" placeholder="短信验证码" onfocus="this.placeholder=''" onblur="this.placeholder='短信验证码'" class="text" v-model="msg" v-on:input="msginput">
                        <img src="../../image/login/delete.png" class="delete" v-if="showdelete" @click="qingchu_msg()">
                        <input type="button" value="获取验证码" class="code" v-on:click="countdown();" id="dao" v-else>
                    </div>
                </div>
                <div class="thridly">
                    <button class="three" onclick="youkelogin()">游客登录</button>
                </div>
                <div class="fourth" v-if="isbukedianji">登录</div>
                <div class="fourth" v-else @click="submit()">登录</div>
                <div class="fifth" onclick="register_code()">注册</div>
                <!-- <div class="sixth"> <img src="../../image/login/rectangle-one.png" class="rectangle" /> 第三方快捷登入
                    <img src="../../image/login/rectangle-one.png" class="rectangle" />
                </div> -->
                <!-- <div class="last" style="width:80%;margin-left:10%;">
                    <div class="five">
                        <img src="../../image/login/qq.png" class="qq" onclick="qqlogin()">
                        <div class="q">QQ</div>
                    </div>
                    <div class="five">
                        <img src="../../image/login/wechat.png" class="wei" onclick="wechatlogin()">
                        <div class="xin">微信</div>
                    </div>
                    <div class="five">
                        <img src="../../image/login/microblog.png" class="wei" onclick="weibologin()">
                        <div class="bo">微博</div>
                    </div>
                </div> -->
            </div>
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/thirdparty.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/login.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/jiguang.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vm',
        data: {
            mobile: '',
            msg: '',
            guojianumber: '86',
            isshowdelete: false,
            showdelete: false,
            isbukedianji: true

        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.addEventListener({
                    name: 'loginsuccess'
                }, function(ret, err) {
                      _this.mobile=''
                });

                api.parseTapmode();
                var header = $api.byId('aui-header');
                $api.fixStatusBar(header);
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                if (api.deviceId) {
                    _this.device_id = api.deviceId
                }
                api.addEventListener({
                    name: 'number'
                }, function(ret, err) {
                    if (ret) {
                        _this.guojianumber = ret.value.number
                    }
                });

            }
        },
        methods: {
            init: function() {
                var _this = this;
                // if($api.getStorage('savephonea')){
                //   _this.mobile=$api.getStorage('savephonea');
                //   $api.rmStorage('savephonea');
                // }
               _this.mobile=api.pageParam.mobilevalue;
                api.addEventListener({
                    name: 'exitlogin'
                }, function(ret, err) {
                      _this.mobile=''
                });
                api.addEventListener({
                    name: 'loginsuccess'
                }, function(ret, err) {
                      _this.mobile=''
                });
                api.addEventListener({
                    name: 'phonea'
                }, function(ret, err) {
                    _this.mobile = ret.value.key1;
                });
                if(_this.mobile){
                  if(_this.mobile.length > 0){
                      _this.isshowdelete = true
                  }
                }
                _this.msg = '';
            },
            qingchu: function() {
                var _this = this;
                _this.mobile = '';
                api.sendEvent({
                    name: 'phonet',
                    extra: {
                        key1: _this.mobile,
                    }
                });
                if (this.mobile && this.msg) {
                    $('.fourth').addClass('fourthactive');
                    _this.isbukedianji = false;

                } else {
                    $('.fourth').removeClass('fourthactive');
                    _this.isbukedianji = true;

                }
            },
            qingchu_msg: function() {
                var _this = this;
                _this.msg = '';
                _this.showdelete = false;
                _this.isshowdelete = false
                if (this.mobile && this.msg) {
                    $('.fourth').addClass('fourthactive');
                    _this.isbukedianji = false;

                } else {
                    $('.fourth').removeClass('fourthactive');
                    _this.isbukedianji = true;

                }
            },
            mobileinput() {
                var _this = this;
                if (_this.mobile.length > 0) {
                    _this.isshowdelete = true
                    $('.code').addClass('codeactive');

                } else {
                    _this.isshowdelete = false
                    $('.code').removeClass('codeactive');

                }
                if (this.mobile && this.msg) {
                    $('.fourth').addClass('fourthactive');
                    _this.isbukedianji = false;

                } else {
                    $('.fourth').removeClass('fourthactive');
                    _this.isbukedianji = true;

                }
            },
            msginput() {
                var _this = this;
                this.msg = this.msg.substr(0, 4);
                if (this.msg) {
                    if(this.msg.length==4){
                      var _this = this;
                      _this.showdelete = true;
                    }
                } else {
                      _this.showdelete = false;
                }
                if (this.mobile && this.msg) {
                    $('.fourth').addClass('fourthactive');
                    _this.isbukedianji = false;
                } else {
                    $('.fourth').removeClass('fourthactive');
                    _this.isbukedianji = true;
                }
            },
            jiaodian() {
                // 输入框获取焦点
                var _this = this;
                _this.isshowdelete = true
            },
            shijiaodian() {
                // 输入框失去焦点
                var _this = this;
                // _this.isshowdelete = false;
                api.sendEvent({
                    name: 'phonet',
                    extra: {
                        key1: _this.mobile,

                    }
                });
            },
            submit: function() {
                var _this = this;
                var deviceId = api.deviceId;
                if (M.phone(_this.mobile)) {
                  new rest().post('loginSms').datae({
                      'mobile':_this.guojianumber+_this.mobile,
                      'msg': _this.msg,
                      'device_id': deviceId
                  }).success(function(res) {
                    // alert(JSON.stringify(res));

                      if (res.flag == 1) {
                          $api.setStorage('uid', res.msg.uid);
                          jiguang.bingdalias(res.msg.uid)
                          $api.setStorage('session', res.msg.session);
                          $api.setStorage('mobile', _this.guojianumber+_this.mobile);
                          $api.setStorage('mobile1',_this.mobile);
                          api.sendEvent({
                              name: 'loginsuccess',
                          });

                          api.toast({
                              msg: '登录成功',
                              duration: 2000,
                              location: 'middle'
                          });
                          _this.mobile = '';
                          _this.msg = '';
                          api.setFrameGroupIndex({
                              name: 'group',
                              index: 0
                          });
                          api.openWin({
                              name: 'index',
                              url: '../../index.html',
                              slidBackEnabled: false,
                              animation: {
                                  type: "fade", //动画类型（详见动画类型常量）
                                  subType: "from_right", //动画子类型（详见动画子类型常量）
                                  duration: 300 //动画过渡时间，默认300毫秒
                              },
                              reload: false
                          });
                          setTimeout(function() {
                            api.closeWin();
                          }, 1000)
                      }else{
                        api.toast({
                            msg: res.msg,
                            duration: 2000,
                            location: 'middle'
                        });

                      }
                  }).error(function(err) {
                      api.toast({
                          msg: err.msg,
                          duration: 2000,
                          location: 'middle'
                      });
                  }).run()
                }
            },
            countdown: function() {
                var _this = this;
                _this.msg = '';
                var name = document.getElementById("dao").className;
                if (M.phone(_this.mobile)) {
                  new rest().get('sendSms').datae({
                      'mobile': _this.guojianumber+_this.mobile,
                  }).success(function(res) {
                      if (res.flag == 1) {
                          api.toast({
                              msg: '发送成功',
                              duration: 2000,
                              location: 'middle'
                          });
                          msgflag = true;
                          M.daojishi(msgflag, name)
                      } else {
                          msgflag = false;
                          M.daojishi(msgflag, name)
                          api.toast({
                              msg: res.msg,
                              duration: 2000,
                              location: 'middle'
                          });
                      }
                  }).error(function(err) {
                      api.toast({
                          msg: err.msg,
                          duration: 2000,
                          location: 'middle'
                      });
                  }).run()
                }
            },
            Openpasswordlogin() {
              var _this=this;
                api.openWin({
                    name: 'pawword1',
                    url: './rapid-pawword.html',
                    pageParam: {
                      mobilevalue:_this.mobile
                    }
                });
                setTimeout(function() {
                    api.closeWin();
                }, 1000)

            }

        }
    })

    function youkelogin() {
        api.openWin({
            name: 'index',
            url: '../../index.html',

        });
    }



    function register_code() {
        api.openWin({
            name: 'register_code',
            url: '../login/register-codewin.html',
        });
        setTimeout(function() {
            api.closeWin();
        }, 1000)
    }


    function login() {
        api.closeWin();
    }

    function Openphone() {
        api.openWin({
            name: 'arearegion',
            url: './area-region-win.html',

        });
    }

    var isbdmobileflag;

    function wechatlogin() {
      third.auth('wx', function(res,third,thirdopenid,uname) {
        // alert(JSON.stringify(res))
          if (res.flag == 1) {
            if(res.msg){
              thirdlogin1(third, thirdopenid)

            }else{
              api.openWin({
                  name: 'verifyrepirthird',
                  url: '../login/verify-repirthird.html',
                  pageParam:{
                    third:third,
                    thirdopenid:thirdopenid,
                    uname:uname
                  }
              });
              setTimeout(function() {
                api.closeWin();
              }, 2000)
            }
          }
      }, true)
    }

    function qqlogin() {
      third.auth('qq', function(res,third,thirdopenid,uname) {
        if (res.flag == 1) {
          if(res.msg){
            thirdlogin1(third, thirdopenid)

          }else{
            api.openWin({
                name: 'verifyrepirthird',
                url: '../login/verify-repirthird.html',
                pageParam:{
                  third:third,
                  thirdopenid:thirdopenid,
                  uname:uname

                }
            });
            setTimeout(function() {
                api.closeWin();
            }, 2000)
          }
        }
      }, true)
    }

    function weibologin() {
      third.auth('weibo', function(res,third,thirdopenid,uname) {

        if (res.flag == 1) {
          if(res.msg){
            thirdlogin1(third, thirdopenid)

          }else{
            api.openWin({
                name: 'verifyrepirthird',
                url: '../login/verify-repirthird.html',
                pageParam:{
                  third:third,
                  thirdopenid:thirdopenid,
                  uname:uname

                }
            });
            setTimeout(function() {
              api.closeWin();
            }, 2000)
          }
        }
      }, true)
    }

    function thirdlogin1(third, restopenid) {
        var data = {};
        var deviceId = api.deviceId;
        data['device_id'] = deviceId;
        data[third] = restopenid
        new rest().get('loginThird').datae(data).success(function(res) {
            if (res.flag == 1) {
                loginafter(res.msg.uid, res.msg.session)
            }
        }).error(function(err) {
            api.toast({
                msg: err.msg,
                duration: 2000,
                location: 'center'
            });
        }).run()
    }

    function loginafter(uid,session) {
      $api.setStorage('uid', uid);
      jiguang.bingdalias(uid)
      $api.setStorage('session',session);
      api.sendEvent({
          name: 'loginsuccess',
      });
      api.closeWin();

      // setTimeout(function() {
      //   api.closeWin();
      // }, 2000)

    }
    function closeWin1() {
        api.closeWin();
    }
</script>

</html>
